<template>

    <div class="box">
        <h3 class="title">关于我</h3>
        <div class="about">
            <img src="@/assets/image/blog2.jpg">
            <h3>一名路过的程序员</h3>
            <p>开发时长两年半,精通C,Java等各种语言的拼写,能熟练的对电脑进行开机关机操作</p>
            <div class="flow">
                <a href="https://blog.csdn.net/m0_72568538?spm=1000.2115.3001.5343"> <span
                        class="iconfont icon-csdn11"></span></a>
                <a href="https://gitee.com/"> <span class="iconfont icon-gitee"></span></a>
                <a href="https://github.com/"> <span class="iconfont icon-gitup"></span></a>
            </div>
        </div>
    </div>
</template>


<script setup>

</script>

<style lang="scss" scoped>
.box {
    border: .1rem solid rgba(0, 0, 0, 0.2);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #fff;
}

.box .title {
    padding: 1.5rem;
    font-size: 2rem;
    text-align: center;
    color: #222;
    background: #fff;
    border-bottom: .1rem solid #676767;
}

.box .about {
    text-align: center;
    padding: 1rem 1.5rem;
}

.box .about img {
    height: 15rem;
    width: 15rem;
    border-radius: 50%;
    margin: 1rem 0;
    object-fit: cover;
}

.box .about h3 {
    font-size: 2rem;
    color: orange
}

.box .about p {
    padding: 1rem 0;
    line-height: 1.5;
    font-size: 1.5rem;
    color: cadetblue;
}

.about .flow {
    padding: 1rem 0;
}

.about .flow a {
    display: inline-block;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background: #222;
    color: #eee;
    line-height: 4rem;
    margin: 0 .1rem;
    cursor: pointer;
}

.about .flow a span {
    font-size: 2rem;
}

.about .flow a:hover span {
    color: orange;
}
</style>